<template>
	<view>
		<view class="merchant_title">
			<uni-icons class="merchant_title_icons" type="search"></uni-icons>
			<input class="merchant_title_input" placeholder="请输入搜索关键词" type="text" v-model="keywords">
			<view @click="showMerchantFun()">搜索</view>
		</view>
		<view class="merchant_center" v-if="shop_list.length !== 0">
			<view class="merchant_center_item" v-for="(item,index) in shop_list" :key="index"
				@click="goToparticularsFun(item.id)">
				<view class="merchant_center_item_top">
					<view class="merchant_center_item_top_left">
						<image class="merchant_center_item_top_left_img" :src="item.logo" mode=""></image>
					</view>
					<view class="merchant_center_item_top_right">
						<view class="merchant_center_item_top_right_merchname">
							{{item.merchname}}
						</view>
						<view class="merchant_center_item_top_right_desc">
							{{item.desc}}
						</view>
						<view class="juli" style="color:#999;font-size: 24rpx;">
							距离您{{item.juli}}
						</view>
					</view>
				</view>
				<view class="merchant_center_item_bottom">
					<view class="merchant_center_item_bottom_left">
						<uni-icons type="location-filled" style='color:rgb(245,133,57)'></uni-icons>
						{{item.address}}
					</view>
					<view class="merchant_center_item_bottom_right">
						去逛逛
					</view>
				</view>
			</view>
		</view>


		<u-empty v-if='shop_list.length === 0' mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
		</u-empty>






		<tab-ber :current='2'></tab-ber>
	</view>
</template>

<script>
	import tabBer from '@/components/appTab/appTab.vue';
	export default {
		components: {
			tabBer
		},
		data() {
			return {
				openid: '',
				keywords: '',
				shop_list: '',


				longitude: '',
				latitude: '',
			}
		},
		onLoad() {
			let _this = this;
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data;
					this.GetLocationFun();
				},
				fail: () => {
					uni.navigateTo({
						url: '/pages/login/login'
					});
				}
			});
		},
		methods: {
			GetLocationFun() {
				let _this = this;
				uni.showLoading({
					title: '获取定位',
					mask: false
				});
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					success: function(res) {
						console.log(res);
						_this.longitude = res.longitude; // 经度
						_this.latitude = res.latitude // 纬度
						_this.showMerchantFun();
						uni.hideLoading();

					},
					fail() {

						_this.showinteraction('获取定位失败')
						uni.hideLoading();
					}
				})
			},
			goToparticularsFun(id) {
				uni.navigateTo({
					url: `/pages/LocalLife/BusinessProfile/BusinessProfile?id=${id}&openid=${this.openid}`
				})
			},
			//提示
			showinteraction(title, icon = 'none') {
				uni.showToast({
					title,
					icon,
					duration: 2000,
					mask: false
				})
			},
			showMerchantFun() {
				let _this = this;
				uni.request({
					url: this.$BASE_URL +
						'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.merch.get_shop_list&app=1',
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					data: {
						openid: this.openid,
						keywords: this.keywords,
						lat: this.latitude,
						lng: this.longitude
					},
					success(res) {
						console.log(res);
						_this.shop_list = res.data.shop_list;
					}

				})
			}
		}
	}
</script>

<style lang="scss">
	.merchant_title {
		width: 90vw;
		margin: 20rpx auto;
		padding: 15rpx 20rpx;
		display: flex;
		align-items: center;
		border: 2rpx solid #ccc;
		border-radius: 20rpx;

		.merchant_title_icons {
			width: 10%;
		}

		.merchant_title_input {
			flex: 1;
		}
	}

	.merchant_center {
		width: 100%;
		// height: 500rpx;
		// background-color: #ccc;
		padding: 0 40rpx;

		.merchant_center_item {
			border-bottom: 1rpx solid #EDEDED;
			margin: 30rpx 0;
			padding: 20rpx 0;

			.merchant_center_item_top {
				width: 100%;
				display: flex;

				.merchant_center_item_top_left {
					margin-right: 20rpx;


					.merchant_center_item_top_left_img {
						width: 150rpx;
						height: 150rpx;
						border-radius: 20rpx;
					}
				}

				.merchant_center_item_top_right {
					flex: 1;

					.merchant_center_item_top_right_merchname {
						font-size: 38rpx;
					}

					.merchant_center_item_top_right_desc {
						font-size: 24rpx;
						margin: 20rpx 0;
						color: #0c0c0c;
					}
				}
			}

			.merchant_center_item_bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;

				margin: 10rpx 0;

				.merchant_center_item_bottom_left {
					width: 80%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.merchant_center_item_bottom_right {

					width: 100rpx;
					height: 50rpx;
					font-size: 20rpx;
					line-height: 50rpx;
					text-align: center;
					border-radius: 25rpx;
					color: #fff;
					background-color: rgb(245, 133, 57);
				}
			}
		}



	}
</style>